<template>
  <div class="mod-home">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <span style="font-weight: bold">快速开始</span>
          </div>
          <div style="margin-right: 40px;margin-left: 40px;">
            <el-steps :active="4">
              <el-step title="" >
                <a slot="icon" title="添加设备" href="#" @click="$router.push('/sys-stb')" style="font-size: 40px!important;display: block">
                  &nbsp;<icon-svg name="add-device"></icon-svg>
                  <div style="font-size: 14px;">
                    添加设备
                  </div>
                </a>
              </el-step>
              <el-step title="">
                <a slot="icon" href="#" @click="$router.push('/sys-material')" style="font-size: 40px!important;">
                  <span style="font-size: 8px;">&nbsp;</span> <icon-svg name="add-mt"></icon-svg>
                  <div style="font-size: 14px;">
                    &nbsp;上传素材
                  </div>
                </a>
              </el-step>
              <el-step title="" >
                <a slot="icon" href="#" @click="$router.push('/sys-theme')" style="font-size: 40px!important;">
                  <span style="font-size: 2px;">&nbsp;</span>  <icon-svg name="add-jiemu"></icon-svg>
                  <div style="font-size: 14px;">
                    &nbsp;制作节目
                  </div>
                </a>
              </el-step>
              <el-step title="" >
                <a slot="icon" href="#" @click="$router.push('/publish-add')" style="font-size: 40px!important;">
                  <icon-svg name="fabu"></icon-svg>
                  <div style="font-size: 14px;">
                    发布节目
                  </div>
                </a>
              </el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="11" >
        <el-card >
          <div slot="header">
            <span style="font-weight: bold">终端信息</span>
          </div>
          <el-container style="height: 200px;color: #474e55">
            <el-aside width="200px">
              <div>
                总数量
              </div>
              <div style="width: 100%;text-align: center;line-height: 120px;font-size: 30px;font-weight: 600;">
                {{count.all}}台
              </div>
            </el-aside>
            <el-main>
              <el-row style="margin-top: 20px">
                <el-col>
                  在线数量 &nbsp;<span style="color: #008000">{{count.onlineCount}}</span> 台
                </el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col>
                  离线数量  &nbsp;<span style="color: darkorange">{{count.offlineCount}}</span> 台
                </el-col>
              </el-row>
              <el-row style="margin-top: 20px;">
                <el-col>
                  失效数量  &nbsp;<span style="color: red;">{{count.failCount}}</span> 台
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
      <el-col :span="2">
        <div>
          &nbsp;
        </div>
      </el-col>
      <el-col :span="11">
        <el-card>
          <div slot="header">
            <span style="font-weight: bold">存储占比</span>
          </div>
          <div id="J_chart" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        chartLine: null,
        count: {},
        names: [],
        values: []
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.getSize()
        this.getCount()
      })
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },
    methods: {
      getCount () {
        const url = '/generator/stb/count'
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.count = data.data
          } else {
            // alert(data.msg)
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      getSize () {
        const url = '/sys/material/size'
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.names = data.name
            this.values = data.size
            this.init()
          } else {
            // alert(data.msg)
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      init () {
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}KB ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: this.names,
            formatter: function (name) {
              return name
            }
          },
          series: [
            {
              name: '文件大小',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.values
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chart'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      }
    }
  }
</script>

<style>
  .el-step.is-horizontal .el-step__line{
    top: 40px!important;
  }
  .el-step__icon.is-text{
    border:0px!important;
  }
  .el-step__icon{
    width: 80px;
    height: 80px;
  }
  .chart-box {
    min-height: 200px;
  }
</style>


